| react | 您所在的位置：网站首页 › react native community插件 › react |
|
react-native 导航器
1. 安装依赖
npm install @react-navigation/native
npm install react-native-gesture-handler
npm install react-native-reanimated
npm install react-native-screens
npm install react-native-safe-area-context
npm install @react-native-community/masked-view
// yarn 则使用 yarn add
React Native 0.60及更高版本，链接是自动的。因此，不需要运行 react-native link 如果在Mac上并为iOS开发，您需要安装Pad（通过Cocoapods）以完成链接 npx pod-install ios在 App.js 或者 index.js 拷贝进以下代码 import 'react-native-gesture-handler'; 2. 创建一个堆栈导航器（Stack Navigation） 2.1 安装堆栈导航依赖 npm install @react-navigation/stack 2.2 navigation 可用 API在所有的页面组件中都可以获取到navigation属性（只要组件被定义为路由配置和使用React Navigation来渲染路由）。 // const {route, navigation} = this.props; // class写法 // 可用api navigation.navigate("RouteName") // 如果新路由不在堆栈中，则将其推到堆栈导航器，否则将跳转到这个页面。 navigation.push("RouteName") // 跳转去相关路由页面 可以多次跳转到相同路由页面 navigation.goBack() // 返回上一个页面 navigation.popToTop() // 回到堆栈的第一个屏幕页面 navigation.popToTop() // 回到堆栈的第一个屏幕页面 navigation.popToTop() // 回到堆栈的第一个屏幕页面 2.3 Example // In App.js in a new project import * as React from 'react'; import { View, Text, Button } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; function LoginScreen({navigation}) { return ( Login Screen navigation.navigate("Home")}> ); } function HomeScreen({navigation}) { return ( Home Screen navigation.navigate("Login")}> ); } const Stack = createStackNavigator(); // 想隐藏第一个标题的头部导航 // function App() { return ( // options={({ route }) => ({ title: route.params.name })} // 头部导航可以根据路由参数动态修改 ); } export default App; 2.4 设置stack堆栈导航动画内置了相应的跳转动画 forHorizontal：从右向左进入 forVertical：从下向上进入 forFadeFromBottomAndroid：从底部淡出 forFade：无动画 function App() { return ( // Home页面 添加从右向左进入动画 ); }每次调用推送时，我们都会向导航堆栈添加新路由。当您调用导航时，它首先尝试查找具有该名称的现有路由，并且只有在堆栈上还没有新路由时，才会推送新路由。 这样就完成了一个堆栈导航了，可以完成登录注册这种类似页面的切换了。 2.5 导航器（路由）传参 2.5.1 嵌套在导航内的参数将路由上需要的参数放在一个对象里，作为 navigation.navigate 函数的第二个参数：navigation.navigate('RouteName', {key: value}) ，在组件中获取这个参数：route.params。 navigation.navigate('Home', { screen: 'Settings', params: { user: 'Tom' }, }); 2.5.2 更新参数页面上也可以更新参数，类似更新页面状态。navigation.setParams就可以用来更新页面参数 你也可以向页面传递一些初始参数。如果导航到页面并没有设置任何参数，这个初始参数将会被使用。它们会与传递的参数进行浅合并。初始参数被指定为initialParams 属性: 2.5.3 传递参数到之前的页面不仅仅能传递参数到新的页面，也能传递参数到之前的页面。 想做到这个，你可以使用navigate的方法，如果页面存在的话，可以使用像 goBack 这样的方法。你可以通过navigate携带参数将参数传回去： // Some.js import React, { useState, Component } from "react"; import { Text, View } from "react-native"; class App extends Component { constructor(props) { super(props) } render() { return ( {this.props.route.params.type ? this.props.route.params.type : "has null"} ) } } export default App; // Home.js import * as React from 'react'; import { View, TextInput, Button } from 'react-native'; function goLogin(navigation, postText) { navigation.push("Login", {type: postText}) // 把输入框的值传递给 Login 页面 } function Some({navigation, route}) { let {text} = route.params; let [postText, setPostText] = React.useState(text); return ( goLogin(navigation, postText)} /> ); } export default Some; 2.6 配置header bar自定义 header 样式有3个关键属性：headerStyle, headerTintColor ,和 headerTitleStyle。 function App() { return ( ); } 2.7 Header Button给 header 右侧添加一个操作按钮--常见功能 function App() { return ( ( alert('This is a button!')} title="add" color="#999" /> ), }} /> ); } 3. 嵌套导航（Tabs） 3.1 安装依赖 npm install @react-navigation/bottom-tabs // 5.x版本 3.2 Example // Some.js // 将之前的 Some.js 替换为以下代码 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; import * as React from 'react'; import { View, Button, Text } from 'react-native'; const Tab = createBottomTabNavigator(); // function HomePage() { return ( HomePage navigation.push('Login')} /> ); } function Detail({navigation}) { return ( Detail ); } function Mine({navigation}) { return ( Mine ); } function Some({navigation, route}) { return ( ); } export default Some; 3.3 给 Tab 添加 icon第一种 function TabNav() { return ( ({ tabBarIcon: ({ focused, color, size }) => { let icon; if (route.name === 'HomePage') { icon = focused ? require("@/assets/images/icon_tab1_active.png") : require("@/assets/images/icon_tab1.png"); } else if (route.name === 'Detail') { icon = focused ? require("@/assets/images/icon_tab2_active.png") : require("@/assets/images/icon_tab2.png"); }else if (route.name === 'Mine') { icon = focused ? require("@/assets/images/icon_tab3_active.png") : require("@/assets/images/icon_tab3.png"); } return }, })} > ); }第二种 reactnavigation.org/docs/bottom… function MyTabBar({ state, descriptors, navigation }) { const focusedOptions = descriptors[state.routes[state.index].key].options; if (focusedOptions.tabBarVisible === false) { return null; } return ( { state.routes.map((route, index) => { const { options } = descriptors[route.key]; const label = options.tabBarLabel !== undefined ? options.tabBarLabel : options.title !== undefined ? options.title : route.name; const isFocused = state.index === index; let icon; if (label === 'HomePage') { icon = isFocused ? require("@/assets/images/icon_tab1_active.png") : require("@/assets/images/icon_tab1.png"); } else if (label === 'Detail') { icon = isFocused ? require("@/assets/images/icon_tab2_active.png") : require("@/assets/images/icon_tab2.png"); }else if (label === 'Mine') { icon = isFocused ? require("@/assets/images/icon_tab3_active.png") : require("@/assets/images/icon_tab3.png"); } const onPress = () => { const event = navigation.emit({ type: 'tabPress', target: route.key, canPreventDefault: true, }); if (!isFocused && !event.defaultPrevented) { navigation.navigate(route.name); } }; const onLongPress = () => { navigation.emit({ type: 'tabLongPress', target: route.key, }); }; return ( {label} ); }) } ); } function Some({navigation, route}) { return ( } > ); } export default Some; 3.4 监听Tab的点击 class Home extends Component { constructor(props) { super(props) } componentDidMount() { // focus 或者 blur this._navListener = this.props.navigation.addListener('focus', () => { console.log("点击了"); }); } componentWillUnmount() { this._navListener.remove(); } } |
| CopyRight 2018-2019 实验室设备网 版权所有 |